﻿<template>
    <div class="page-main Bill">
        <DataTable ref="BillDataTableRef" :data="list" :hasAdd="true && !isSelect && Gx.HasPermission(30302)" :hasFilter="true" :hasCheckbox="false" :page-index="pageInfo.pageIndex" :page-size="pageInfo.pageSize" :total-count="pageInfo.totalCount" @page-change="onPageChange" @search-filter="onSearchFilter" @clear-filter="onClearFilter" @show-detail="onShowDetail" v-bind="$attrs">
            <vxe-column title="出库单号" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.code || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="申请日期" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ Gx.YMD(row.billDate) }}
                </template>
            </vxe-column>

            <vxe-column title="出库类型" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.operType_Name || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="出库仓库" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.warehouse_Name || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="状态" min-width="120" show-overflow>
                <template #default="{ row }">
                    <span :class="Enums.Bill_Status.Get(row.status).color">{{ Enums.Bill_Status.Get(row.status).text }}</span>
                </template>
            </vxe-column>

            <vxe-column title="申请人" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.applyUserName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="确认人" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ row.confirmUserName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="确认时间" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ Gx.YMD(row.confirmDate) }}
                </template>
            </vxe-column>

            <vxe-column title="操作" width="250" v-if="!isSelect">
                <template #default="{ row }">
                    <el-button type="warning" @click="onShowDetail(row, 1)">查看</el-button>
                    <el-button type="primary" @click="onShowDetail(row)" v-if="row.status == Enums.Bill_Status.创建中 && Gx.HasPermission(30303)">编辑</el-button>
                    <el-button type="primary" @click="onShowDetail(row, 2)" v-if="row.status == Enums.Bill_Status.确认中 && Gx.HasPermission(30305)">确认</el-button>
                    <el-button type="danger" @click="onDeleteBill(row)" v-if="row.status == Enums.Bill_Status.创建中 && Gx.HasPermission(30304)">删除</el-button>
                </template>
            </vxe-column>

            <!-- 在添加按钮后面的搜索条件 -->
            <template #otherFilter>
                <el-input class="placeholder-center" v-model="filterModel._Code" placeholder="出库单号" clearable></el-input>
                <DataSelect table="OperType" :filter="{ _InOutType: Enums.OperType_InOutType.出库 }" placeholder="请选择出库类型" v-model:id="filterModel._OperTypeIDs" multiple collapse-tags></DataSelect>
                <DataSelect table="Warehouse" placeholder="请选择出库仓库" v-model:id="filterModel._WarehouseIDs" multiple collapse-tags></DataSelect>
                <EnumSelect :enums="Enums.Out_Bill_Status" placeholder="请选择出库状态" v-model:id="filterModel._Statuss" multiple collapse-tags></EnumSelect>
            </template>

            <!-- 在搜索按钮后面的按钮 -->
            <template #otherBtn></template>

            <!-- 顶部右侧按钮 -->
            <template #rightBtn v-if="!isSelect"></template>

            <!-- 高级搜索内容 -->
            <template #Advfilter>
                <el-form v-model="filterModel" label-position="top" @submit.prevent>
                    <el-form-item label="申请日期" prop="warehouseID">
                        <el-date-picker style="width: 300px !important" v-model="BillDate" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" clearable value-format="YYYY-MM-DD" format="YYYY-MM-DD"> </el-date-picker>
                    </el-form-item>
                </el-form>
            </template>
        </DataTable>

        <!-- 单据详情 -->
        <OutBillDetail ref="BillDetailRef" v-if="isShowDetail" @close="onCloseDetail"></OutBillDetail>
    </div>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { TipsType } from "@/_gx/TsEnums";
import OutBillDetail from "./OutBillDetail.vue";

/********************************************** 接收参数 **********************************************/

const props = defineProps({
    //是否为选择组件，在此组件用做弹框选择的子组件时传true
    isSelect: {
        type: Boolean,
        default: false,
    },

    //默认搜索条件，如果是多选的话可以增加已选数据的过滤
    defaultFilter: {
        type: Object,
        default: {},
    },
});

/********************************************** 列表相关定义 **********************************************/

//表格的数据
const list = ref([]);
//申请时间
const BillDate = ref<any>();

//分页信息
const pageInfo = reactive({
    pageIndex: 1,
    pageSize: 20,
    totalCount: 0,
    orderBy: "[x].[BillID] DESC",
});

//搜索条件
const filterModel = ref<any>({ _InOutType: Enums.OperType_InOutType.出库 });

//搜索条件空对象的json字符串，用于清空搜索条件时使用
const filterModelJson = Gx.SerializeObject(filterModel.value);

//DataTable对象，使用此对象来调用DataTable组件中抛出的属性或方法
const BillDataTableRef = ref(null);

/********************************************** 列表方法与事件 **********************************************/

//页面加载
onMounted(() => {
    Init();
});

//初始化
const Init = () => {
    GetPage();
};

//分页方法
const GetPage = () => {
    let _data = {};

    MergeObjs(_data, filterModel.value, props.defaultFilter);

    App.CallApi(Api.Bill.GetPage(pageInfo.pageIndex, pageInfo.pageSize, pageInfo.orderBy), {
        data: _data,
        success: (res: any) => {
            list.value = res.items;
            pageInfo.totalCount = res.totalCount;

            //在这里抛出一个事件，用来处理当此组件用于选择弹框时数据回显的选中功能
            emits("setSelectData");
        },
    });
};

//分页改变
const onPageChange = (data: any) => {
    pageInfo.pageIndex = data.currentPage;
    pageInfo.pageSize = data.pageSize;
    GetPage();
};

//高级搜索点击搜索按钮
const onSearchFilter = () => {
    pageInfo.pageIndex = 1;
    if (!Gx.IsEmpty(BillDate.value) && BillDate.value.length > 0) {
        filterModel.value._BillDate_Begin = BillDate.value[0];
        filterModel.value._BillDate_End = BillDate.value[1];
    } else {
        filterModel.value._BillDate_Begin = null;
        filterModel.value._BillDate_End = null;
    }
    GetPage();
};

//高级搜索点击清空按钮
const onClearFilter = () => {
    BillDate.value = [];
    filterModel.value = Gx.DeserializeObject(filterModelJson);
    pageInfo.pageIndex = 1;
    GetPage();
};

//删除
const onDeleteBill = (row) => {
    App.Confirm({
        msg: "确定要删除此数据？",
        type: TipsType.Warning,
        onOk: () => {
            App.CallApi(Api.Bill.Delete(row.autoID), {
                success: (res) => {
                    App.Tips({ type: TipsType.Success, msg: "操作成功！" });
                    GetPage();
                },
            });
        },
    });
};

/********************************************** 详情页相关 **********************************************/

//是否显示详情对话框
const isShowDetail = ref(false);
//详情对话框Ref对象
const BillDetailRef = ref(null);
//向子组件传值
const rowAutoID = ref<number | null>(null);
provide("rowAutoID", rowAutoID);

//显示详情
const onShowDetail = (row, type?) => {
    isShowDetail.value = true;
    rowAutoID.value = row?.autoID;
    nextTick(() => {
        BillDetailRef.value.Init(type);
    });
};

//关闭详情
const onCloseDetail = (isRefresh: boolean) => {
    if (isRefresh) {
        GetPage();
    }

    isShowDetail.value = false;
};

//向上抛出的事件与方法
const emits = defineEmits(["setSelectData"]);
defineExpose({ BillDataTableRef });
</script>
